<template>
  <div>
    <div class="hmtop" style="margin-right:30px">
      <!--顶部导航条 -->
      <div class="am-container header">
        <ul class="message-l">
          <div class="topMessage">
            <div v-if="!nickname" class="menu-hd">
              <router-link :to="{name:'login'}" target="_top" class="h">
                亲，请登录
              </router-link>
              <a href="#" target="_top">免费注册</a>
            </div>
            <div v-if="nickname" class="menu-hd">
              <router-link :to="{name:'admin'}" target="_top" class="h">
                {{nickname}}
              </router-link>
            </div>
          </div>
        </ul>
        <ul class="message-r">
          <div class="topMessage home">
            <div class="menu-hd">
              <router-link :to="{name:'home'}">
                商城首页
              </router-link>
            </div>
          </div>
          <div class="topMessage my-shangcheng">
            <div class="menu-hd MyShangcheng">
              <router-link :to="{name:'user'}">
                <i class="am-icon-user am-icon-fw"></i>个人中心
              </router-link>
            </div>
          </div>
          <div class="topMessage mini-cart">
            <div class="menu-hd">
              <router-link :to="{name:'shopcart'}">
                <i class="am-icon-shopping-cart am-icon-fw"></i>
                <span>购物车</span>
                <strong id="J_MiniCartNum" class="h"></strong>
              </router-link>
            </div>
          </div>
          <div class="topMessage favorite">
            <div class="menu-hd">
              <router-link :to="{name:'collect'}">
                <i class="am-icon-heart am-icon-fw"></i>
                <span>收藏夹</span>
              </router-link>
            </div>
          </div>
          <div class="topMessage favorite" v-if="nickname">
            <div class="menu-hd" @click="quit()">
              <a href="javascript:;;">注销</a>
            </div>
          </div>
        </ul>
      </div>

      <!--悬浮搜索框-->
      <div class="nav white" style="width:white;max-width:1200px">
        <div class="logoBig">
          <li>
            <img src="../../assets/img/logo.png" style="width:150px">
          </li>
        </div>

        <div class="search-bar pr">
          <a name="index_none_header_sysc" href="#"></a>
          <form>
            <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="请输入搜索关键词" autocomplete="off" v-model="keyword">
            <input id="ai-topsearch" class="am-btn" value="搜索" index="1" type="button" v-on:click="searchItem()">
          </form>
        </div>
      </div>

      <div class="clear"></div>
    </div>

    <div class="clear"></div>
    <b class="line"></b>
    <div class="search">
      <div class="search-list">
        <div class="nav-table">
          <div class="nav-cont" style="padding-left:0px">
            <ul>
              <li class="index"><a href="/">首页</a></li>
              <li class="qc"><a href="/trade/rusbuying">我的收藏</a></li>
              <li class="qc"><a href="/trade/auction">购物车</a></li>
              <li class="qc"><a href="/foot">足迹</a></li>
            </ul>
          </div>
        </div>

        <div class="am-g am-g-fixed">
          <div class="am-u-sm-12 am-u-md-12">
            <div class="theme-popover">
              <div class="clear"></div>
            </div>
            <div class="search-content">
              <div class="sort">
                <li v-bind:class="sort(1)" @click="sortkey=1,searchItem()"><a title="综合" href="javascript:;;">最新发布</a></li>
                <li v-bind:class="sort(2)" @click="sortkey=2,searchItem()"><a title="销量" href="javascript:;;">价格优先</a></li>
                <li v-bind:class="sort(3)" @click="sortkey=3,searchItem()"><a title="价格" href="javascript:;;">热度排序</a></li>
              </div>
              <div class="clear"></div>

              <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-5 boxes">
                <li v-if="itemList.length<=0">暂无商品...</li>
                <li v-for="item in itemList">
                  <div class="i-pic limit">
                    <img v-bind:src="item.mainImg" v-on:click="toItem(item.itemId)" />
                    <p class="title fl" style=" height:1rem; overflow:hidden; text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">{{item.itemName}}</p>
                    <p class="price fl">
                      <b>¥</b>
                      <strong>{{item.sellingPrice}}</strong>
                    </p>
                    <p class="number fl">
                      浏览<span>1110</span>
                    </p>
                  </div>
                </li>
              </ul>
            </div>

            <div class="clear"></div>
            <!--分页 -->
            <div class="block fr mt-30 mb-30">
              <el-pagination background @current-change="handleCurrentChange" :current-page.sync="index" :page-size="25" layout="prev, pager, next, jumper" :total="total">
              </el-pagination>
            </div>

          </div>
        </div>
        <foot></foot>
      </div>
    </div>
    <navfull></navfull>
    <el-dialog title="请选择所属学校" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-cascader :options="schools" v-model="school" :show-all-levels="false" @change="schoolSelected"></el-cascader>
      </span>
      <span>
        <el-button @click="dialogVisible=false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import navfull from '@/components/navfull'
import foot from '@/components/foot.vue'
export default {
  name: 'search',
  data () {
    return {
      nickname: null,
      sortkey: 1,
      userInfo: null,
      searchWord: "",
      keyword: "",
      itemList: [],
      schools: [],
      school: [],
      total: 100,
      index: 1,
      dialogVisible: false,
      ctgName:null
    }
  },
  components: {
    navfull,
    foot
  },
  mounted () {
    this.keyword=this.$route.query.seo;
    this.ctgName=this.$route.query.ctgName;
    this.getUserInfo()
    this.searchItem()
  },
  methods: {
    getUserInfo () {
      var nickname = localStorage.getItem("NICKNAME");
      if (nickname != null) {
        this.nickname = nickname
      } else {
        this.nickname = null
      }
    },
    handleCurrentChange () {
      this.searchItem();
    },
    searchItem () {
      var schoolId = localStorage.getItem("schoolId");
      if (schoolId == undefined || schoolId == null || schoolId == "") {
        this.selectSchool();
        return;
      }
      let param ={};
      param.itemName=this.keyword;
      param.seo=this.keyword;
      param.schoolId = schoolId;
      if(this.ctgName!=undefined&&this.ctgName!=null){
        param.ctgName = this.ctgName;
      }
      param.index = this.index;
      param.pageSize = 25;
      param.sortkey = this.sortkey;
      var keyword = this.keyword == null || this.keyword == "" ? "*" : this.keyword
      this.axios.get("/item/searchItemList", {
        params: param
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.itemList = result.data.rows;
          this.total = result.data.total;
        }
      })
    },
    selectSchool () {
      this.dialogVisible = true;
      this.$http.get('static/universitys.json').then(res => {
        this.schools = res.body;
      })
    },
    schoolSelected () {
      this.dialogVisible = false;
      localStorage.setItem("schoolId", this.school[1]);
      this.searchItem();
    },
    sort (index) {
      if (this.sortkey == index)
        return "first"
      return ""
    },
    toItem (itemId) {
      this.$router.push({
        name: "item",
        query: {
          itemId: itemId
        }
      })
    },
    quit () {
      this.axios.get("/user/quit");
      localStorage.removeItem("NICKNAME");
      localStorage.removeItem("AUTHTOKEN");
      localStorage.removeItem("schoolId");
      this.$router.push({
        name: 'login'
      })
    }
  }
}
</script>

<style scoped>
@import "../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../assets/css/demo.css";
@import "../../assets/css/seastyle.css";
@import "../../assets/css/common/commonStyle.css";
</style>
